<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <h4>食品库存管理</h4>
        <el-menu
            active-text-color="#ffd04b"
            class="el-menu-vertical-demo"
            background-color="#525a67"
            text-color="#fff"
            router>


          <template
              v-for="(item, index) in routes"
              :key="index">
            <el-menu-item
                :index="`/` + item.path"
                v-if="item.root && loginAdmin.adminId === 1 || !item.root"
            >
              <template #title>
                <span class="menu-item-name">{{ item.showName }}</span>
              </template>
            </el-menu-item>
          </template>


        </el-menu>


      </el-aside>
      <el-container>
        <el-header>
          <!-- 个人中心下拉框 -->
          <div class="login-admin">
            <span>{{ loginAdmin.adminName }}</span>
            <el-link :underline="false" @click="logout">退出登录</el-link>
          </div>
        </el-header>
        <el-main>
          <div v-if="router.currentRoute.value.path === '/'">
            <h1 class="welcomeHome">食品库存管理系统</h1>
          </div>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {ref, onBeforeMount} from "vue";
import {useRouter, useRoute} from "vue-router";
import axios from "axios";
import {getLoginAdmin, logout} from "@/utils/index";

const router = useRouter();
const routes = ref([])
const loginAdmin = ref({})


onBeforeMount(() => {
  const temp = router.options.routes;
  for (const k in temp) {
    if (temp[k].name === 'home') {
      routes.value = temp[k].children;
      break;
    }
  }

  loginAdmin.value = getLoginAdmin();
  // console.log(loginAdmin.value);
})

</script>
<style scoped>

.login-admin {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}

.login-admin > span {
  margin-right: 10px;
}

.global-main {
  margin-left: auto;
  /* text-align: right; */
}

.el-container {
  height: 100vh;
}

.el-aside {
  background: #525a67;
  color: white;
}

.el-aside > h4 {
  text-align: center;
}

.el-header {
  border-bottom: 2px solid #ededed;
  background-color: #f9f9f9;
  padding: 0 15px;
  /* box-sizing: border-box; */
  text-align: right;
}

.el-main {
  background: #f9f9f9;
}


.welcomeHome {
  text-align: center;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.menu-item-name {
  text-align: center;
  /*font-family: Arial, Helvetica, sans-serif;*/
}
</style>
